<script setup>
import addForm from './addForm.vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useCommunityList, useType } from '../../../hooks/index'
import { getdeviceListApi, deldeviceApi } from '../../../api/device'
import ImagePreview from '../../../components/ImagePreview'

const queryData = reactive({
  buy_time: '',
  pageSize: 10,
  current: 1,
  community_code: '',
  name: ''

})
const communityList = useCommunityList()
const typeList = useType()
const list = ref([])
const total = ref(0)
const initData = async () => {
  const { data } = await getdeviceListApi(queryData)
  console.log(data);
  list.value = data.rows
  total.value = data.count

}
onMounted(() => {
  initData()
})
const sizeChange = (val) => {
  queryData.pageSize = val
  initData()
}
const currentChange = (val) => {
  queryData.current = val
  initData()

}
// 显示状态文字
const showState = (val) => {
  let res = typeList.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// 转换时间格式
const formate = (timestamp) => {
  const date = new Date(timestamp); // 将时间戳转换为毫秒并创建 Date 对象
  const year = date.getFullYear()
  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}

//搜索
let timeList = ref([])
const onSearch = () => {
  if (timeList.value.length > 0) {
    timeList.value[0] = timeList.value[0].getTime()
    timeList.value[1] = timeList.value[1].getTime()
    queryData.buy_time = timeList.value.join(',')

  }

  queryData.current = 1
  initData()
}
// 重置
const onCancel = () => {
  timeList.value = []
  Object.assign(queryData, {
    buy_time: '',
    pageSize: 10,
    current: 1,
    community_code: '',
    name: ''
  })
  initData()

}
const addEditForm = ref()
const edit = (id) => {
  addEditForm.value.replyData(id)
}
// 删除
const deleteLit = async (id) => {
  const res = await deldeviceApi(id)
  ElMessage.success(res.msg);

  initData()

}
</script>
<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">资产设备管理</b>用于管理小区里的公共设备，比如电梯，路灯，垃圾桶，配电箱等</p>
    <el-card style="margin-bottom: 15px;">
      <!-- 搜索区域 -->
      <el-form :inline="true" label-position="top">
        <el-form-item label="小区名称">
          <el-select clearable v-model="queryData.community_code" >
            <el-option v-for="item in communityList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input  v-model.trim="queryData.name"></el-input>
        </el-form-item>
        <el-form-item label="购买时间">
          <el-date-picker v-model="timeList"  type="daterange" range-separator="至" start-placeholder="请选择"
            end-placeholder="请选择" />
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-button type="primary"  @click="onSearch">搜索</el-button>
          <el-button @click="onCancel" >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addEditForm.isShow = true">新增资产设备</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" :border="true" stripe>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community?.name }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="code"></el-table-column>
        <el-table-column label="设备名称" prop="name"></el-table-column>
        <el-table-column prop="pic_url" label="设备图片">
          <template #default="{ row }">
            <!-- <img :src="row.pic_url" alt="" style="width: 100px; height: 100px;"> -->
            <ImagePreview style="width: 100px; height: 100px;" :src="row.photo"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="设备品牌" prop="brand"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="设备数量" prop="quantity"></el-table-column>
        <el-table-column label="购买日期" prop="buy_time">
          <template #default="{ row }">
            {{ formate(row.buy_time) }}
          </template>
        </el-table-column>
        <el-table-column label="预计使用年限" prop="durable_years"></el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button type="text" @click="edit(row.id)">
              编辑
            </el-button>
            <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" icon-color="#626AEF"
              title="确认删除吗？" @confirm="deleteLit(row.id)">
              <template #reference>
                <el-button type="text">
                  删除
                </el-button>
              </template>
            </el-popconfirm>


          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <br>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="queryData.current"
        :page-size="queryData.pageSize" layout="total, prev, pager, next"
        :total="total" background>
        ">
      </el-pagination>
      <!-- 新增修改组件 -->
      <addForm ref="addEditForm" @updateList="initData" />
    </el-card>
  </div>
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>
<style  scoped></style>